<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Tabs name="main_tabs_child" size="small">
          <TabPane tab="main_tabs_child" label="基础配置">
            <Collapse value="0">
              <Panel>
                常规配置
                <div slot="content">
                  <Form :label-width="80">
                    <Collapse value="1" accordion class="m-t-5px">
                      <Panel>
                        雷达图形
                        <div slot="content">
                          <FormItem label="雷达半径">
                            <Tooltip content="可填百分比尺寸，也可以直接填数字，填入的数字将以px作为单位设置雷达图的半径" :max-width="200" placement="left">
                              <Input size="small" v-model="chartOption.radar.radius" placeholder=""/>
                            </Tooltip>
                          </FormItem>
                          <FormItem label="绘制类型">
                            <Select :transfer="true" size="small" v-model="chartOption.radar.shape">
                              <Option v-for="item in shapes" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                          </FormItem>
                        </div>
                      </Panel>
                      <Panel>
                        半径轴
                        <ShowToggle class="float-right" v-model="chartOption.radar.splitLine.show"></ShowToggle>
                        <div slot="content">
                          <FormItem label="显示">
                            <i-switch v-model="chartOption.radar.splitLine.show">
                              <span slot="open"></span>
                              <span slot="close"></span>
                            </i-switch>
                          </FormItem>
                          <FormItem label="颜色">
                            <PnColorPicker size="small" v-model="chartOption.radar.splitLine.lineStyle.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="线宽">
                            <InputNumber size="small" :max="1000" :min="0" :step="0.1" v-model="chartOption.radar.splitLine.lineStyle.width"></InputNumber> px
                          </FormItem>
                          <FormItem label="线类型">
                            <Select :transfer="true" size="small" v-model="chartOption.radar.splitLine.lineStyle.type">
                              <Option v-for="item in $PnChartDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                          </FormItem>
                          <FormItemPanel>
                            <div slot="title">
                              <span>
                                数据显示范围
                                <Tooltip content="决定雷达图数据显示的范围，建议数据源中所有节点的数据都在这个范围内" :max-width="200" placement="top">
                                  <Icon type="md-help-circle" size="14"/>
                                </Tooltip>
                              </span>
                            </div>
                            <FormItem label="最小值">
                              <InputNumber size="small" :max="10000000" :min="0" v-model="chartOption.radar.indicator.min"></InputNumber>
                            </FormItem>
                            <FormItem label="最大值">
                              <InputNumber size="small" :max="10000000" :min="0" v-model="chartOption.radar.indicator.max"></InputNumber>
                            </FormItem>
                          </FormItemPanel>
                          <FormItemPanel title="区域分隔色">
                            <FormItem label="显示">
                              <i-switch v-model="chartOption.radar.splitArea.show"></i-switch>
                            </FormItem>
                            <FormItem label="颜色1">
                              <PnColorPicker size="small" v-model="chartOption.radar.splitArea.areaStyle.color[0]" alpha recommend/>
                            </FormItem>
                            <FormItem label="颜色2">
                              <PnColorPicker size="small" v-model="chartOption.radar.splitArea.areaStyle.color[1]" alpha recommend/>
                            </FormItem>
                          </FormItemPanel>
                        </div>
                      </Panel>
                      <Panel>
                        角度轴
                        <ShowToggle class="float-right" v-model="chartOption.radar.axisLine.show"></ShowToggle>
                        <div slot="content">
                          <FormItem label="显示">
                            <i-switch v-model="chartOption.radar.axisLine.show">
                              <span slot="open"></span>
                              <span slot="close"></span>
                            </i-switch>
                          </FormItem>
                          <FormItem label="颜色">
                            <PnColorPicker size="small" v-model="chartOption.radar.axisLine.lineStyle.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="线宽">
                            <InputNumber size="small" :max="1000" :min="1" v-model="chartOption.radar.axisLine.lineStyle.width"></InputNumber> px
                          </FormItem>
                          <FormItem label="线类型">
                            <Select :transfer="true" size="small" v-model="chartOption.radar.axisLine.lineStyle.type">
                              <Option v-for="item in $PnChartDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                          </FormItem>
                        </div>
                      </Panel>
                      <Panel>
                        指标标签
                        <ShowToggle class="float-right" v-model="chartOption.radar.name.show"></ShowToggle>
                        <div slot="content">
                          <FormItem label="显示">
                            <i-switch v-model="chartOption.radar.name.show">
                              <span slot="open"></span>
                              <span slot="close"></span>
                            </i-switch>
                          </FormItem>
                          <FormItem label="字体颜色">
                            <PnColorPicker size="small" v-model="chartOption.radar.name.textStyle.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="字体大小">
                            <InputNumber size="small" :max="1000" :min="1" v-model="chartOption.radar.name.textStyle.fontSize"></InputNumber> px
                          </FormItem>
                        </div>
                      </Panel>
                    </Collapse>
                  </Form>
                </div>
              </Panel>
              <Panel>
                图例
                <ShowToggle class="float-right" v-model="chartOption.legend.show"></ShowToggle>
                <div slot="content">
                  <EchartsLegendConfigForm v-model="chartOption.legend"></EchartsLegendConfigForm>
                </div>
              </Panel>
              <Panel v-if="chartOption.title">
                标题
                <ShowToggle class="float-right" v-model="chartOption.title.show"></ShowToggle>
                <div slot="content">
                  <EchartsTitleConfigForm v-model="chartOption.title"></EchartsTitleConfigForm>
                </div>
              </Panel>
              <Panel>
                其他
                <div slot="content">
                  <EchartsOtherConfigForm v-model="compConfigData"></EchartsOtherConfigForm>
                </div>
              </Panel>
            </Collapse>
          </TabPane>
          <TabPane tab="main_tabs_child" label="系列映射">
            <Button class="float-right" size="small" type="primary" @click="addSeries"><Icon type="md-add" /> 新增系列</Button>
            <div class="clearfix"></div>
            <div class="m-b-10px"></div>

            <draggable tag="Collapse" :component-data="{attrs: {accordion: true}}" :list="chartOption.series" handle=".ivu-collapse-header">
              <Panel :name="$PnUtil.uuid()" v-for="(row, index) in chartOption.series" :key="index">
                {{row.name ? row.name : '系列' + (index + 1)}}
                <a href="javascript:;" class="float-right m-r-5px" style="color: #757575;" @click.stop="deleteSeries(index)"><Icon type="md-trash" /></a>
                <div slot="content">
                  <Form :label-width="100">
                    <FormItem label="系列名">
                      <Input size="small" v-model="row.name" placeholder=""/>
                    </FormItem>
                    <FormItem label="圆点大小">
                      <InputNumber size="small" :max="1000" :min="1" v-model="row.symbolSize"></InputNumber>
                    </FormItem>
                    <FormItem label="折线颜色">
                      <PnColorPicker size="small" v-model="row.itemStyle.color" alpha recommend/>
                    </FormItem>
                    <FormItemPanel title="拐点标签">
                      <FormItem label="显示标签文本">
                        <i-switch v-model="row.label.normal.show">
                          <span slot="open"></span>
                          <span slot="close"></span>
                        </i-switch>
                      </FormItem>
                      <FormItem label="标签位置">
                        <Select :transfer="true" size="small" v-model="row.label.normal.position">
                          <Option v-for="item in labelPositions" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                      </FormItem>
                      <FormItem label="标签文本颜色">
                        <PnColorPicker size="small" v-model="row.label.normal.color" alpha recommend/>
                      </FormItem>
                      <FormItem label="标签字体大小">
                        <InputNumber size="small" :max="1000" :min="1" v-model="row.label.normal.fontSize"></InputNumber> px
                      </FormItem>
                    </FormItemPanel>
                    <FormItemPanel title="区域样式">
                      <FormItem label="起始颜色">
                        <PnColorPicker size="small" v-model="row.areaStyle.normal.startColor" alpha recommend/>
                      </FormItem>
                      <FormItem label="结束颜色">
                        <PnColorPicker size="small" v-model="row.areaStyle.normal.endColor" alpha recommend/>
                      </FormItem>
                    </FormItemPanel>
                  </Form>
                </div>
              </Panel>
            </draggable>
          </TabPane>
        </Tabs>

      </TabPane>
      <TabPane name="extend_tab" tab="main_tabs" label="扩展配置">
        <Container v-if="mainTabsValue == 'extend_tab'">
          <CustomOptionDocument :componentId="id"></CustomOptionDocument>
          <CodeEditor v-model="customOption" mode="json"></CodeEditor>
          <EchartsSpreadingCodeForm v-model="echartsSpreadingCode"></EchartsSpreadingCodeForm>
        </Container>
      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="BaseRadarChart"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <InteractionReceive></InteractionReceive>
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="数据项点击时运行">
            <Alert style="padding: 5px;">此脚本中，使用_this指向当前组件vm实例，通过params可获取点击项数据</Alert>
            <CodeEditor v-model="dataItemClickJsCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import BaseRadarChart from './BaseRadarChart.js'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'BaseRadarChartForm', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompFormMixin],
    data() {
      return {
        shapes: [
          {label: '多边形', value: 'polygon'},
          {label: '圆形', value: 'circle'}
        ],
        labelPositions: [
          {label: '左', value: 'left'},
          {label: '上', value: 'top'},
          {label: '右', value: 'right'},
          {label: '下', value: 'bottom'}
        ]
      }
    },
    mounted() {

    },
    methods: {

      addSeries () {
        this.chartOption.series.push(BaseRadarChart.buildSeriesObj(''))
      },

      deleteSeries (index) {
        this.chartOption.series.splice(index, 1)
      }

    },
    computed: {
      ...mapFields({

        chartOption: 'component.compConfigData.chartOption'

      })
    }
  }
</script>

<style scoped>

</style>
